<template>
	<view>
		<view>

			<view class="top">
				<view class="userInfo">
					<view class="picture">
						<image v-if=" isLogin === true " :src=" userInfo.avatarUrl " />
						<image v-if=" isLogin === false " src="/static/icons/notlogin.png"></image>
					</view>
					<view v-if=" isLogin === true " class="other">
						<view class="username">{{ userInfo.nickName }}</view>
					</view>
					<view v-if=" isLogin === false ">
						<u-button @click="getUserInfo" shape='circle' type="primary" :plain="true">
							登录授权
						</u-button>
					</view>
				</view>
			</view>

			<view class="tips">
				<u-cell-group>
					<u-cell-item v-for=" (item,index) in items " :title="item.name" :icon='item.icon'
						@click="lookMore(item)" :data-info='item' :arrow='true'></u-cell-item>
				</u-cell-group>
			</view>

		</view>
		<view>
			<u-tabbar active-color="#0000ff" inactive-color="#000000" :list="list" :mid-button="true"></u-tabbar>
		</view>
	</view>

</template>

<script>
	const {
		list
	} = require('../../utils/tabbar.js');
	export default {
		data() {
			return {
				list: list,
				userInfo: {},
				isLogin: false,
				items: [{
						flag: 'info',
						name: '公司简介',
						icon: 'file-text'
					},
					{
						flag: 'join',
						name: '加入我们',
						icon: 'man-add'
					},
					{
						flag: 'address',
						name: '联系方式',
						icon: 'phone'
					}
				]
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		onShow() {
			this.isLogin = wx.getStorageSync('isLogin') || false;
		},
		methods: {

			getUserInfo() {
				const that = this;
				uni.showLoading({
					title: '正在登录'
				});
				wx.getUserProfile({
					provider: 'weixin',
					desc: '用以展示您的头像和昵称等信息',
					success(res) {
						console.log(res);
						uni.setStorageSync('userInfo', JSON.parse(res.rawData));
						uni.setStorageSync('isLogin', true);
						that.userInfo = JSON.parse(res.rawData);
						that.isLogin = true;
					},
					complete() {
						wx.hideLoading();
					},
					fail(err) {
						if (err.errMsg == 'getUserProfile:fail auth deny') {
							uni.showToast({
								title: '授权取消',
								icon: 'error'
							})
						}
					}
				})
			},
			
			lookMore(e){
				uni.navigateTo({
					url:'/pages/aboutUs/aboutUs',
					success(res) {
						res.eventChannel.emit('getType',e)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		position: relative;
		width: 100%;
		height: 270rpx;
		// background-image: linear-gradient(120deg, #58bcff, #2b63ff);
		// background-image: linear-gradient(120deg, deepskyblue, #9ae1a0);
		background-image: linear-gradient(120deg, skyblue, blue);
		display: flex;
		justify-content: center;
	}

	.userInfo {
		width: 85%;
		height: 200rpx;
		position: absolute;
		top: 50%;
		background-color: #ffffff;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 0 10rpx #47b6ff;

	}

	.picture {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin: 0 60rpx;
		box-shadow: 0 0 10rpx #a0a0a0;
		background-color: #6fc5ff;
	}

	.picture>image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.other {
		flex: 1;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.username {
		font-size: 42rpx;
	}

	.phone {
		display: flex;
		align-items: center;
	}

	.tips {
		margin: 95rpx 30rpx;
	}
</style>
